{% block sw_code_editor %}
<div
    class="sw-code-editor"
    :class="classes"
>

    {% block sw_text_editor_label %}
    {% endblock %}

    {% block sw_code_editor_editor %}
    <!-- eslint-disable-next-line vuejs-accessibility/tabindex-no-positive -->
    <sw-base-field
        v-bind="attrsWithoutClass"
        :label="label"
        :disabled="disabled"
        :required="required"
        :error="error"
    >
        <template #sw-field-input>
            <div
                :ref="`editor${editorId}`"
                class="sw-code-editor__editor"
                :content="value"
                tabindex="0"
            ></div>
        </template>
    </sw-base-field>
    {% endblock %}
    {% block sw_code_editor_sanitize_info %}
    <div
        v-if="sanitizeInput"
        class="sw-code-editor__sanitize-bar"
    >
        {% block sw_code_editor_sanitize_info_content %}
        <div
            v-if="contentWasSanitized && enableHtmlSanitizer"
            class="sw-code-editor__sanitized-hint"
            :class="{'sw-code-editor__sanitized-hint--visible': contentWasSanitized}"
        >
            {% block sw_code_editor_sanitize_info_content_sanitized %}
            <sw-circle-icon
                icon-name="regular-info-circle"
                :size="30"
                variant="warning"
            />
            <p class="sw-code-editor__sanitize-text">
                {{ $tc('global.sw-code-editor.sanitizedHint') }}
            </p>
            {% endblock %}
        </div>
        <div
            v-if="enableHtmlSanitizer"
            class="sw-code-editor__sanitize-info"
            :class="{'sw-code-editor__sanitize-info--visible': !contentWasSanitized}"
        >
            {% block sw_code_editor_sanitize_info_content_hint %}
            <sw-circle-icon
                icon-name="regular-info-circle"
                :size="30"
                variant="info"
            />
            <p class="sw-code-editor__sanitize-text">
                {{ $tc('global.sw-code-editor.sanitizeInfo') }}
            </p>
            {% endblock %}
        </div>
        {% endblock %}

    </div>

    <div
        v-else-if="enableHtmlSanitizer && sanitizeInfoWarn"
        class="sw-code-editor__sanitize-bar"
    >
        <div
            class="sw-code-editor__sanitize-info"
            :class="{'sw-code-editor__sanitize-info--visible': !contentWasSanitized}"
        >
            {% block sw_code_editor_sanitize_info_content_hint %}
            <sw-circle-icon
                icon-name="regular-info-circle"
                :size="30"
                variant="info"
            />
            <p class="sw-code-editor__sanitize-text">
                {{ $tc('global.sw-code-editor.sanitizeInfo') }}
            </p>
            {% endblock %}
        </div>
    </div>
    {% endblock %}
</div>
{% endblock %}
